<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单样式框</title>
        <style>

        div p{
            box-shadow: 10px 10px 100px red,
            10px -10px 100px yellow,
            -10px 10px 100px yellow,
            -10px -10px 100px red;
            border-radius: 50%;
        }
        body{font-size: 14px}
        input{
            width: 300px;
            height: 25px;
            font-size: 14px;
            line-height: 25px;
            border: 1px solid #339999;
            color: #ff0000;
            background-color: #99cc66;
        }
        textarea{
            width: 400px;
            height: 300px;
            line-height: 24px;
            border: none;
            border: 1px solid #ff7300;
            background: #99cc99 url("../static/phtot03.gif") no-repeat;
            display: block;
            margin-left: 60px;
        }
        a input{
            width: 250px;
            height: 70px;
            margin: 200px 800px;
            background: darkturquoise;
            border-radius: 100px;
            outline: none;
            font-size: 36px;
            color: white;
        }
    </style>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"> </script>
    <script type="text/javascript">
        $(function () {
            $('input').mouseover(function () {
                this.style.background = 'red'
            });
            $('input').mouseleave(function () {
                this.style.background = 'darkturquoise'
            })
        })
    </script>
</head>
<body>
<a href="#">
<input type="submit" value="提交数据"></a>


<form>
    <p><label for="user">文本框：</label>
        <input type="text" placeholder="看我的颜色" id="user" name="user" />
    </p>
<br />

    <p><label for="text">文本区域：</label>
        <textarea id="text" name="text" placeholder="看我背景颜色"></textarea>
    </p>

</form>
<div>
    <p style="border: 1px solid red;width: 500px;height: 500px;margin: auto"></p>
</div>

</body>
</html>